<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Atmarkcafe Vietnam - Simple Parallax Scrolling Experience</title>

	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/custom.css">

	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
	<script type="text/javascript" src="js/waypoints.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
	<ul class="navigation">
		<li data-slide="1">Slide 1</li>
		<li data-slide="2">Slide 2</li>
		<li data-slide="3">Slide 3</li>
		<li data-slide="4">Slide 4</li>
	</ul>

	<img class="logo" src="images/envatologo.png">

	<!--SLIDE-->
	<div class="slide" id="slide-1" data-slide="1" data-stellar-background-ratio="0.5">
		<a class="button" data-slide="2" title=""></a>
	</div>
	<div class="slide" id="slide-2" data-slide="2" data-stellar-background-ratio="0.5">
		
		<div class="wrapper">
			<img src="images/slide2/blur-ball.png" 
				data-stellar-ratio="1" 
				data-stellar-vertical-offset="-102" alt="">
			<img src="images/slide2/blur-ball-big.png" 
				data-stellar-ratio="1.5" 
				data-stellar-vertical-offset="-102" alt="">
			<img src="images/slide2/focus-ball.png" 
				data-stellar-ratio="1.5" 
				data-stellar-vertical-offset="-53" alt="">
			<img src="images/slide2/small-ball.png" 
				data-stellar-ratio="2.7" 
				data-stellar-vertical-offset="-25" alt="">
			<img src="images/slide2/blur-ball.png" 
				data-stellar-ratio="3" 
				data-stellar-vertical-offset="-55" alt="">
			<img src="images/slide2/blur-ball-big.png" 
				data-stellar-ratio="2" 
				data-stellar-vertical-offset="-102" alt="">
			<img src="images/slide2/focus-ball.png" 
				data-stellar-ratio="1.5" 
				data-stellar-vertical-offset="-53" alt="">
			<img src="images/slide2/small-ball.png" 
				data-stellar-ratio="2.7" 
				data-stellar-vertical-offset="-25" alt="">	
		</div>


		<span class="slide-no">Slide 2</span>
		<a class="button" data-slide="3" title=""></a>
	</div>
	<div class="slide" id="slide-3" data-slide="3" data-stellar-background-ratio="0.5">

		<div class="wrapper">
			<img src="images/slide3/freelance.png" 
				data-stellar-ratio="1.4" 
				data-stellar-vertical-offset="-102" alt="">
			<img src="images/slide3/psdtuts.png" 
				data-stellar-ratio="1.5" 
				data-stellar-vertical-offset="-53" alt="">
			<img src="images/slide3/rockable.png" 
				data-stellar-ratio="2.7" 
				data-stellar-vertical-offset="-200" alt="">
			<img src="images/slide3/themeforest.png" 
				data-stellar-ratio="3" 
				data-stellar-vertical-offset="-200" alt="">
			<img src="images/slide3/tutshub.png" 
				data-stellar-ratio="1" 
				data-stellar-vertical-offset="-200" alt="">
			<img src="images/slide3/psdtuts.png" 
				data-stellar-ratio="1.5" 
				data-stellar-vertical-offset="-200" alt="">
		</div>

		<span class="slide-no">Slide 3</span>
		<a class="button" data-slide="4" title=""></a>
	</div>
	<div class="slide" id="slide-4" data-slide="4" data-stellar-background-ratio="0.5">

			<span class="slide-no">Slide 4</span>
			<span class="parallaxbg">
				Use the parallax effects on background images too!
			</span>

	</div>
	<!--SLIDE END-->

</body>
</html>